Background - 金魚都能懂的CSS必學屬性 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 22

Modern Web

金魚都能懂的CSS必學屬性系列第 22 篇

Background - 金魚都能懂的CSS必學屬性

12th鐵人賽 css教學 css 金魚都能懂網頁教學

CSScoke

2020-10-07 23:37:44

16369 瀏覽

分享至

background 如字面所示，主要用途是設定網頁中元素的背景，實際上 background 是一個CSS 縮寫，它的值是由多個 CSS 屬性所組成，原始碼撰寫方式如下

background: gray url("amos.png") scroll no-repeat 50% 50% / 50% 50%;

我們可以看到多個值串起來有點驚人啊！目前完整的寫完可以高達 8 個值，這時候就需要特別注意到值的順序問題了，一但寫錯就可能整段都失效，請各位新手與開發者千萬要注意再注意！

background 的順序

由前面我們可以看到一個背景屬性有非常多的不同項目可以設定，以金魚必學的 CSS 屬性來說，Amos 簡單條列於下

background-color
background-image
background-attachment
background-repeat
background-poition
background-size

奇怪了！前面明明提到 background 最多到 8 個值，但為何屬性卻只有 6 個呢？主要是其中兩個屬性分別可以設定兩個值，加起來就變成驚人的 8 個值了。

了解了是哪幾個 background 的屬性之後，我們就可以把 background 簡寫的值順序抓出來了，background 值的順序如下

background: color image attachment repeat poition / size

這邊請注意到最後面的那條斜線，該斜線是很重要的，為何要有斜線？主要是要區隔 background-position 與 background-size ，由於這兩個屬性的值中，除了關鍵字以外也可以使用數值單位，那麼就可能會出現下面這樣的原始碼

background: gray url("amos.png") scroll no-repeat 50% 50% / 50% 50%;

是不是看的很暈？ 4 個 50% 分別是甚麼東西啊？有了斜線之後，斜線左側的會被視為 background-position ，右側則會被視為 background-size ，是不是變的單純的多了。這樣的話我們也可以使用關鍵字來設定，像是下面這樣

background: gray url("amos.png") scroll no-repeat center center / 50% 50%;

從之前所寫的「Background-position- 金魚都能懂的CSS必學屬性」可以得知 background-position 可以僅設定一個值，另一個會自動預設 center 來看，我們也可以把原始碼更節省的改成下面這樣

background: gray url("amos.png") scroll no-repeat center / 50% 50%;

是不是變的簡略多了，少打幾個字我就能提早下班了，好屬性不學多麼可惜啊！

background 有哪些值可以忽略

由於瀏覽器本身都會有 CSS 的預設值，所以當我們不設定明確的 background 相關值時，background 會值接採用瀏覽器預設的值(真正的原理其實是 CSS 優先權問題)，所以其實每一個值都可以選擇寫或不寫，很彈性對吧！但 background 撰寫時需要特別注意的則是「 background-position / background-size」這「一組」值，會說它是「一組」的原因很明顯，因為他們在有條件下是必須要一起在斜線的左右出現的。

「 background-position / background-size」在僅有 background-position 時，可以不需要出現斜線，background-size 出現時，必定要與 background-position 與斜線同時撰寫，否則你的原始碼會失效，讓我們來看看下方正常以及會失效的寫法。

可正常執行的寫法

background: url("amos.png") no-repeat center

或

background: url("amos.png") no-repeat center / 50% 50%;

或

background: url("amos.png") no-repeat center / cover;

會失效的寫法

background: url("amos.png") no-repeat / 50% 50%;

或

background: url("amos.png") no-repeat / cover;

或

background: url("amos.png") no-repeat center cover;

以上有興趣的朋友都可以實際的撰寫試玩看看(是要玩甚麼啦XD)

background 撰寫時要注意

background 由於是 CSS 簡寫屬性，所以我們可能不小心會出現以下寫法！

background: red url("amos.png") center center;
background-color: black;

上面這樣的寫法是有可能出現在實際專案中的，一部分有可能是因為開發者的粗心大意，但有時候卻可能是刻意為之，先來了解這樣的寫法會出現的結果是甚麼？由於 CSS 優先權的問題所致，所以這兩行 CSS background 設定的結果會是「黑色底 + Amos 的相片置中於該容器中」。也就是說第 1 行的 red 被第 2 行的 black 覆寫了，由於 background-image 、 background-position 的屬性沒有被覆寫，所以依舊會套用上去。

那麼會刻意使用這樣的寫法是甚麼情況呢？假設我們在一個頁面中有一個基本的區塊背景設定，但每個區塊的背景色彩會不一樣，背景圖片也不一樣，那麼我們就可以採用以下方式來省下一些重複的原始碼，先看看我們尚未套用簡寫的的原始碼可能會長怎樣

HTML

<div class="amos">...略</div>
<div class="gold">...略</div>
<div class="fish">...略</div>
<div class="teaching">...略</div>

CSS

.amos{
	background-color: #faa;
	background-image: url("amos.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50% auto;
}
.gold{
	background-color: #ffa;
	background-image: url("gold.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50% auto;
}
.fish{
	background-color: #fa0;
	background-image: url("fish.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50% auto;
}
.teaching{
	background-color: #666;
	background-image: url("teaching.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50% auto;
}

是不是有些驚人的恐怖！當然！如果你公司始採用原始碼行數來決定你的績效的話，這段原始碼絕對可以讓你獲得不錯的成績(喂！別亂教人啊)。這樣的 CSS 原始碼對於有經驗的開發者，通常我們可以把相同的設定取出來，並使用「CSS 群組式宣告 - 每個開發者都該學會的選取方式」改寫成下面這樣

.amos,
.gold,
.fish,
.teaching{
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50% auto;
}
.amos{
	background-color: #faa;
	background-image: url("amos.png");
}
.gold{
	background-color: #ffa;
	background-image: url("gold.png");
}
.fish{
	background-color: #fa0;
	background-image: url("fish.png");
}
.teaching{
	background-color: #666;
	background-image: url("teaching.png");
}

但這樣的寫法好像還是有改進的空間，所以其實我們可以利用縮寫方式來改寫成下面這樣

.amos,
.gold,
.fish,
.teaching{
	background: no-repeat center / 50% auto;
}
.amos{
	background-color: #faa;
	background-image: url("amos.png");
}
.gold{
	background-color: #ffa;
	background-image: url("gold.png");
}
.fish{
	background-color: #fa0;
	background-image: url("fish.png");
}
.teaching{
	background-color: #666;
	background-image: url("teaching.png");
}

是不是利用一行縮寫就能讓我們大幅的減少冗長的背景設定呢？且原始碼的閱讀也不受影響，可謂是超級方便的啦！寫道這相信大家也都手癢了吧，不多說，快去試著寫看看還有哪些變化應用吧！「金魚都能懂的CSS必學屬性」，下篇見啦！

「金魚都能懂的CSS選取器」已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw

讓我們好好善用CSS選取器吧